<% content_for(:head) do %>
  <%= stylesheet_link_tag :jcrop %>
  <%= javascript_include_tag :jcrop %>

    <script type="text/javascript" charset="utf-8">
    $(function() {
      $("#cropbox").Jcrop({
        onChange: update_crop,
        onSelect: update_crop,
        aspectRatio: 0
      });
    });

    function update_crop(coords) {
      var ratio = <%= @product_photo.photo_geometry(:original).width / @product_photo.photo_geometry(:large_not_cropped).width %>;

      $("#crop_x").val(Math.round(coords.x * ratio));
      $("#crop_y").val(Math.round(coords.y * ratio));
      $("#crop_w").val(Math.round(coords.w * ratio));
      $("#crop_h").val(Math.round(coords.h * ratio));
    }
  </script>
<% end %>

<h1>Editace fotky</h1>

<%= form_for([:admin, @product_photo], :url => admin_product_product_photo_path(:product_id => params[:product_id], :id => params[:id])) do |f| %>
  <%= image_tag @product_photo.attachment.url(:large_not_cropped), :id => "cropbox", :style => "border: 2px solid #B9C9FE;" %>

  <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
    <%= f.hidden_field attribute, :id => attribute %>
  <% end %>

  <table>
    <tfoot>
      <tr>
        <th colspan="10"><%= f.submit %></th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th><%= f.label :description %></th>
        <td><%= f.text_field :description, :maxlength => 250, :size => 125 %></td>
      </tr>
    </tbody>
  </table>

  <h2>Aktuálně používané náhledy</h2>

  <%= image_tag @product_photo.attachment.url(:small) %>
  <%= image_tag @product_photo.attachment.url(:thumb) %>
  <%= image_tag @product_photo.attachment.url(:small_thumb) %>
<% end %>